let examArr = [
    {serial:1 ,name: '语文期中考试', examperiod: '2023语文期中考试',  date: '2023-05-20 14:00:00-2023-05-20 16:00:00', Number: '300' , id: 1},
    {serial:2, name:'语文第一次月考', examperiod: '2023语文第一次月考', date: '2023-05-21 14:00:00-2023-05-21 16:00:00', Number: '200',  id: 2},
    {serial:3,name:'语文第二次月考', examperiod: '2023语文第二次月考', date: '2023-05-22 14:00:00-2023-05-22 16:00:00', Number: '100',  id: 3},
    {serial:4,name:'数学第一次月考', examperiod: '2023数学第一次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', id: 4},
    {serial:5,name:'数学第二次月考', examperiod: '2023数学第二次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', id: 5},
    {serial:6,name:'数学第三次月考', examperiod: '2023数学第三次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', id: 6 },
    {serial:7,name:'数学第四次月考', examperiod: '2023数学第三次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', id: 7 },
  
];
let oTbody=document.querySelector('tbody');//获取tbody 
let opagination=document.querySelector('.pagination')//获取分页
let delBtn=document.querySelector('.del-btn')//删除按钮
let searchCon=document.querySelector('.search-con');//考试期次框内容
let searchBtn=document.querySelector('.search-btn');//获取查询按钮
let addBtn=document.querySelector('.add-btr');//新增按钮
let  hjXh=document.querySelector('.hjxh11');//序号
let hjKsqc=document.querySelector('.hjksqc');//考试期次
let hjKsmc=document.querySelector('.hjksmc');//考试名称
let hjKssj=document.querySelector('.hjkssj');//考试时间
let hjKsrs=document.querySelector('.hjksrs ');//考试人数
let hjBc=document.querySelector('.hjbc');//修改保存按钮
let  hjXh1=document.querySelector('.hjxh111');//序号
let hjKsqc1=document.querySelector('.hjksqc1');//考试期次
let hjKsmc1=document.querySelector('.hjksmc1');//考试名称
let hjKssj1=document.querySelector('.hjkssj1');//考试时间
let hjKsrs1=document.querySelector('.hjksrs1 ');//考试人数 
let chongzhi=document.querySelector('.chongzhi1');//重置按钮


let id=6
let count =5;//每一页的个数
let iNow=1;//当前页
let delId=0;
let editId=0;
let search='';//搜索条件

//渲染的内容渲染的页码

function render(arr){
    //创建的内容

    let str='';
    let renderData=arr.slice((iNow-1)*count,iNow*count);
        for (let i=0;i<renderData.length;i++){
         str +=`<tr>
         <td><input type="checkbox"></td>
         <td>${renderData[i].serial}</td>
         <td>${renderData[i].name}</td>
         <td>${renderData[i].  examperiod}</td>
         <td>${renderData[i]. date}</td>
         <td>${renderData[i]. Number}
         <td id="td1" data-id="${renderData[i].id}"><a class="hjxg" data-toggle="modal" data-target="#editModal" style="cursor:pointer"> <label>
            
         </label>修改</a><a class="del" data-toggle="modal" data-target="#delModal" style="cursor:pointer"> <label>
           
         </label>删除</a><a data-toggle="modal" data-target="#editModa3" style="cursor:pointer"> <label>
             
         </label>详情</a>
         </td>
     </tr>`
    }
    oTbody.innerHTML=str;
    
    // 分页 创建页码
    let ymstrleft=`<li class="strleft">
    <a href="#" class="strright"  aria-label="Previous">
      <span class="strleft" aria-hidden="true">&laquo;</span>
    </a>
    </li>
    `
    let ymstrright=` <li  class="strright" ><a href="#" class="strright"  aria-label="Next">
    <span class="strright" aria-hidden="true">&raquo;</span>
    </a>
    </li>`
    
    let ymstr=''
    for(let i=1;i<=Math.ceil(arr.length/count);i++){
        if(iNow==i){
            ymstr+=`<li class="active"><a href="#">${i}</a></li>`   
        }else{
            ymstr+=` <li><a href="#">${i}</a></li>` 
        }
       
    }
    opagination.innerHTML=ymstrleft+ymstr+ ymstrright
}
//刚开始就渲染页面
render(examArr);

//分页的功能
opagination.addEventListener('click',function(e){
if(e.target.className =='strleft'){//左页码
    if(iNow>1){
      iNow--;  
    }

}else if(e.target.className =='strright'){//右页码
     if(iNow<Math.ceil( examArr.length/5)){
        iNow++;
     }
}else{//数字键
iNow=e.target.innerText.trim();

}
render(examArr);
})

 //删除事件
 oTbody.addEventListener('click',function(e){
    //删除
if(e.target.className.includes('del')){
    delId=e.target.parentNode.dataset.id
    console.log(delId);

}

 })
//点击删除的时候
delBtn.addEventListener('click',function(){
    for(let i=0;i<examArr.length;i++){
         if(examArr[i].id==delId){
             examArr.splice(i,1);
             let renderData=examArr.slice((iNow-1)*count,iNow*count);
            if(renderData.length==0 && iNow>1){
                iNow--;
            }
            render(examArr);
            return; 
         }
    }
})
//点击查询
searchBtn.addEventListener('click',function(){
    let filterArr=[];
    let str=searchCon.value;
    console.log(str);
    for(let i=0;i<examArr.length;i++){
        if(examArr[i].name.includes(str)){//符合条件
            filterArr.push(examArr[i])
        }
    }
    render(filterArr);
})
//点击新增考试时
addBtn.addEventListener('click',function(){
    examArr.push({
        id:++id,
        serial:hjXh.value,
        name:hjKsqc.value,
        examperiod:hjKsmc.value,
        date:hjKssj.value,
        Number:hjKsrs.value

    })
    render(examArr);
})
//点击修改时
hjBc.addEventListener('click',function(){
    examArr.push({
        id:++id,
        serial:hjXh1.value,
        name:hjKsqc1.value,
        examperiod:hjKsmc1.value,
        date:hjKssj1.value,
        Number:hjKsrs1.value
    })
    render(examArr);
})

//点击重置时
chongzhi.addEventListener('click',function(){
    window.history.go(0)
})






